<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Heart Animation with Triangles</title>
    <style>
      body {
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f0f0f0;
        overflow: hidden;
      }

      .container {
        position: relative;
        width: 484px;
        height: 484px;
        outline: 1px dashed;
      }

      .triangle {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transition: 1s ease-in-out;
        animation: opacity 1s ease-in 2s infinite;
      }

      #triangle1 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(75px 143px, 149px 80px, 182px 134px);
        transition-duration: 0ms;
        animation-delay: 0ms;
      }
      #triangle2 {
        background-color: rgb(237, 114, 110);
        clip-path: polygon(149px 80px, 242px 131px, 182px 134px);
        transition-duration: 10ms;
        animation-delay: 10ms;
      }
      #triangle3 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(75px 143px, 149px 240px, 125px 266px);
        transition-duration: 20ms;
        animation-delay: 20ms;
      }
      #triangle4 {
        background-color: rgb(238, 61, 82);
        clip-path: polygon(75px 143px, 182px 134px, 206px 173px, 149px 240px);
        transition-duration: 30ms;
        animation-delay: 30ms;
      }
      #triangle5 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(182px 134px, 242px 131px, 206px 173px);
        transition-duration: 40ms;
        animation-delay: 40ms;
      }
      #triangle6 {
        background-color: rgb(232, 94, 74);
        clip-path: polygon(206px 173px, 242px 131px, 242px 232px);
        transition-duration: 50ms;
        animation-delay: 50ms;
      }
      #triangle7 {
        background-color: rgb(238, 58, 86);
        clip-path: polygon(125px 266px, 149px 240px, 161px 258px);
        transition-duration: 60ms;
        animation-delay: 60ms;
      }
      #triangle8 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(149px 240px, 206px 173px, 242px 232px, 161px 258px);
        transition-duration: 70ms;
        animation-delay: 70ms;
      }
      #triangle9 {
        background-color: rgb(211, 74, 98);
        clip-path: polygon(125px 266px, 161px 258px, 242px 368px);
        transition-duration: 80ms;
        animation-delay: 80ms;
      }
      #triangle10 {
        background-color: rgb(216, 44, 54);
        clip-path: polygon(161px 258px, 242px 232px, 242px 368px);
        transition-duration: 90ms;
        animation-delay: 90ms;
      }
      #triangle11 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(409px 143px, 335px 80px, 302px 134px);
        transition-duration: 100ms;
        animation-delay: 100ms;
      }
      #triangle12 {
        background-color: rgb(237, 114, 110);
        clip-path: polygon(335px 80px, 242px 131px, 302px 134px);
        transition-duration: 110ms;
        animation-delay: 110ms;
      }
      #triangle13 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(409px 143px, 335px 240px, 359px 266px);
        transition-duration: 120ms;
        animation-delay: 120ms;
      }
      #triangle14 {
        background-color: rgb(238, 61, 82);
        clip-path: polygon(409px 143px, 302px 134px, 278px 173px, 335px 240px);
        transition-duration: 130ms;
        animation-delay: 130ms;
      }
      #triangle15 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(302px 134px, 242px 131px, 278px 173px);
        transition-duration: 140ms;
        animation-delay: 140ms;
      }
      #triangle16 {
        background-color: rgb(216, 44, 54);
        clip-path: polygon(278px 173px, 242px 131px, 242px 232px);
        transition-duration: 150ms;
        animation-delay: 150ms;
      }
      #triangle17 {
        background-color: rgb(238, 58, 86);
        clip-path: polygon(359px 266px, 335px 240px, 323px 258px);
        transition-duration: 160ms;
        animation-delay: 160ms;
      }
      #triangle18 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(335px 240px, 278px 173px, 242px 232px, 323px 258px);
        transition-duration: 170ms;
        animation-delay: 170ms;
      }
      #triangle19 {
        background-color: rgb(211, 74, 98);
        clip-path: polygon(359px 266px, 323px 258px, 242px 368px);
        transition-duration: 180ms;
        animation-delay: 180ms;
      }
      #triangle20 {
        background-color: rgb(232, 94, 74);
        clip-path: polygon(323px 258px, 242px 232px, 242px 368px);
        transition-duration: 190ms;
        animation-delay: 190ms;
      }

      .font #triangle1 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(42px 273px, 77px 192px, 96px 234px);
      }
      .font #triangle2 {
        background-color: rgb(237, 114, 110);
        clip-path: polygon(42px 273px, 96px 234px, 87px 336px);
      }
      .font #triangle3 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(40px 330px, 42px 273px, 87px 336px);
      }
      .font #triangle4 {
        background-color: rgb(238, 61, 82);
        clip-path: polygon(40px 330px, 87px 336px, 57px 348px);
      }
      .font #triangle5 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(135px 192px, 228px 285px, 202px 324px);
      }
      .font #triangle6 {
        background-color: rgb(232, 94, 74);
        clip-path: polygon(202px 324px, 228px 285px, 306px 306px);
      }
      .font #triangle7 {
        background-color: rgb(238, 58, 86);
        clip-path: polygon(202px 324px, 306px 306px, 252px 358px);
      }
      .font #triangle8 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(252px 358px, 306px 306px, 354px 368px);
      }
      .font #triangle9 {
        background-color: rgb(211, 74, 98);
        clip-path: polygon(306px 306px, 362px 308px, 354px 368px);
      }
      .font #triangle10 {
        background-color: rgb(216, 44, 54);
        clip-path: polygon(354px 368px, 362px 308px, 430px 354px);
      }
      .font #triangle11 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(362px 308px, 348px 221px, 406px 290px);
      }
      .font #triangle12 {
        background-color: rgb(237, 114, 110);
        clip-path: polygon(362px 308px, 406px 290px, 430px 354px);
      }
      .font #triangle13 {
        background-color: rgb(251, 53, 49);
        clip-path: polygon(406px 290px, 453px 315px, 430px 354px);
      }
      .font #triangle14 {
        background-color: rgb(238, 61, 82);
        clip-path: polygon(226px 152px, 236px 136px, 266px 140px);
      }
      .font #triangle15 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(226px 152px, 266px 140px, 282px 165px);
      }
      .font #triangle16 {
        background-color: rgb(216, 44, 54);
        clip-path: polygon(266px 140px, 298px 125px, 282px 165px);
      }
      .font #triangle17 {
        background-color: rgb(238, 58, 86);
        clip-path: polygon(226px 152px, 282px 165px, 260px 200px);
      }
      .font #triangle18 {
        background-color: rgb(239, 21, 29);
        clip-path: polygon(338px 108px, 405px 108px, 418px 186px);
      }
      .font #triangle19 {
        background-color: rgb(211, 74, 98);
        clip-path: polygon(405px 108px, 453px 144px, 418px 186px);
      }
      .font #triangle20 {
        background-color: rgb(232, 94, 74);
        clip-path: polygon(418px 186px, 453px 144px, 456px 165px);
      }

      button {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        padding: 10px 20px;
        font-size: 16px;
        cursor: pointer;
      }

      @keyframes opacity {
        0% {
          opacity: 1;
        }
        25% {
          opacity: 0.6;
        }
        50% {
          opacity: 0.8;
        }
        75% {
          opacity: 0.8;
        }
        100% {
          opacity: 1;
        }
      }
    </style>
</head>
<body>
    <div class="container">
        <div class="triangle" id="triangle1"></div>
        <div class="triangle" id="triangle2"></div>
        <div class="triangle" id="triangle3"></div>
        <div class="triangle" id="triangle4"></div>
        <div class="triangle" id="triangle5"></div>
        <div class="triangle" id="triangle6"></div>
        <div class="triangle" id="triangle7"></div>
        <div class="triangle" id="triangle8"></div>
        <div class="triangle" id="triangle9"></div>
        <div class="triangle" id="triangle10"></div>
        <div class="triangle" id="triangle11"></div>
        <div class="triangle" id="triangle12"></div>
        <div class="triangle" id="triangle13"></div>
        <div class="triangle" id="triangle14"></div>
        <div class="triangle" id="triangle15"></div>
        <div class="triangle" id="triangle16"></div>
        <div class="triangle" id="triangle17"></div>
        <div class="triangle" id="triangle18"></div>
        <div class="triangle" id="triangle19"></div>
        <div class="triangle" id="triangle20"></div>
    </div>
    <button id="startButton">Start Animation</button>
    <script>
      let animationStarted = false;

      function startAnimation() {
        const container = document.querySelectorAll('.container')[0];
        container.classList.toggle("font"); // 切换class
      }

      document.getElementById('startButton').addEventListener('click', startAnimation);
    </script>
</body>
</html>